<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市联动</title>

</head>
<body>

<select id="province" onchange="change(this.value)">
    <option>请选择</option>
</select>

<select id="city">
    <option>请选择</option>
</select>

</body>
<script>
    let province = [
       "请选择", "北京市","河北省","河南省"
    ];

    let citys = [
        {
            1:"请选择"
        },

        {
            1:"海淀区",
            2:"丰台区",
            3:"朝阳区"
        },
        {
            1:"邯郸市",
            2:"石家庄市",
            3:"唐山市"
        },
        {
            1:"郑州市",
            2:"新乡市",
            3:"安阳市",
            4:"三门峡市",
        }

    ]

    let str = "";
    window.onload =function () {
        //加载省份信息
        let provinceText = document.getElementById("province");
        //加载市信息
        let cityText = document.getElementById("city");
        for(i=0;i<province.length;i++){
            str += "<option value='"+i+"'>"+province[i]+"</option>"
        }
        provinceText.innerHTML = str;
    };

    let cityText = document.getElementById("city");
    function change(a){
        let citystr="";
        //北京
        var city = citys[a];
        for (let val in city) {
            console.log(city[val]);
            citystr+= "<option>"+city[val]+"</option>";
        }
        cityText.innerHTML=citystr;
    }


</script>
</html>